<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>聊天页面-信息列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f2efed;
            line-height: 1;
        }
        /*搜索框*/

        .search_friend_box {
            margin: 1.25rem 0 0.7rem 0;
            display: flex;
            align-items: center;
            background-color: #fff;
            padding: 0.9rem 0;
        }

        .search_friend_box img {
            width: 0.9rem;
            margin: 0 0.75rem
        }

        .search_friend_box input {
            height: 0.9rem;
        }
        /*我的账号*/

        .my_tip {
            font-size: 0.7rem;
            color: #333;
            text-align: center;
        }
        .submit {
          width: 4rem;
          height: 1.5rem;
          background-color: #f23030;
          color: #fff;
          font-size: 0.7rem;
          text-align: center;
          margin: 0 auto;
          line-height: 1.5rem;
          margin-top: 2rem;
          border-radius: 1rem;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="search_friend_box">
            <img src="../../image/four/search_friend.png" alt="">
            <input type="text" placeholder="创客号/手机号" v-model="phone">
        </div>
        <div class="my_tip">我的创客号：{{my_count}}</div>
        <div class="submit" @click="search_friend()">添加好友</div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    apiready = function() {
        var app = new Vue({
          el:'#app',
          data:{
            phone: '',
            token: '',
            my_count:""
          },
          created:function() {
            var $_this=this;
            $_this.my_count = $api.getStorage('user_data').maker_no;
            $_this.token = $api.getStorage('token') || toString('')
          },
          methods: {
            search_friend:function(){
              var $_this = this;

              api.ajax({
                  url: window.Url.Community_searchFriend,
                  method: 'post',
                  data: {
                      values: {
                          token:$api.getStorage('user_data').token,
                          content:$_this.phone
                      }
                  }
              },function(ret, err){
                  console.log(JSON.stringify(ret))
                  if (ret) {
                      if(ret.re==1){

                        $_this.submit(ret.data.user_id)
                      }else{
                        api.toast({
                            msg: '用户不存在',
                            duration: 2000,
                            location: 'bottom'
                        });

                      }
                  } else {
                      alert( JSON.stringify( err ) );
                  }
              });

            },
            submit:function(user_id) {
              var $_this=this;

              if($_this.phone == '') {api.alert({ msg: JSON.stringify('用户ID不能为空') });}
              api.ajax({
                url: window.Url.Community_addFriend,
                method: 'post',
                data: {
                  values:{
                    token:$_this.token,
                    user_id:user_id
                  }
                }
              }, function(ret, err) {
                  if (ret) {
                      console.log(JSON.stringify(ret.info))
                      api.toast({
                          msg: ret.info,
                          duration: 2000,
                          location: 'bottom'
                      });

                  } else {
                      api.alert({ msg: JSON.stringify(err) });
                  }
              })
            }
          }
        })

    };
</script>

</html>
